<!--
 * @Author: yushuang
 * @Date: 2024-12-16 10:20:05
 * @LastEditors: yushuang
 * @LastEditTime: 2024-12-20 09:52:39
 * @Description: 
-->
<script setup lang="ts">
import { shallowRef } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';

defineProps<{
  colorList: { key: string; color: string }[];
  color?: string;
  onChange?: (color: string) => void;
}>();

const themeColorMap = {
  dust: '薄暮',
  volcano: '火山',
  sunset: '日暮',
  cyan: '明青',
  green: '极光绿',
  daybreak: '拂晓',
  geekblue: '科技（默认）',
  purple: '极客蓝',
  magenta: '酱紫'
};

const prefixCls = shallowRef('ant-pro-drawer-setting-theme-color');
</script>

<template>
  <div :class="`${prefixCls}`">
    <div :class="`${prefixCls}-content`">
      <a-tooltip v-for="item in colorList" :key="item.color">
        <template #title>
          {{ themeColorMap[item.key] ?? '主题色' }}
        </template>
        <div :class="`${prefixCls}-block`" :style="{ backgroundColor: item.color }" @click="onChange?.(item.color)">
          <CheckOutlined v-show="color === item.color" />
        </div>
      </a-tooltip>
    </div>
  </div>
</template>
